import UserLabel from './UserLabel'

interface Room {
  createTime: number,
  gameType: number,
  roomDescribe: string,
  roomNo: string,
  totalTurns: number,
  turns: number
}

interface BattleData {
  backUrl: string,
  finishList: Array<any>,
  room: Room,
  clubRoom: Boolean
  oauthMode: string,
  qunUrl: string,
}

interface GameInfo {
  name: string,
  gameId: number,
  component: any,
  images: string,
  width: number,
  height: number
}

declare var window: any

class MainComponent extends eui.Component {
  private tileGroup: eui.Group
  private gameTime: eui.Label
  private roomNo: eui.Label
  private round: eui.Label
  private bottomBtn: eui.Group
  private ruleName: eui.Label
  private paodekuaiName: eui.Label
  private backRoomBtn: eui.Image

  public battleData: BattleData
  public gameInfo: GameInfo
  private oauthMode: string = '';
  private shareBtn: eui.Image

  private uiLabelNumber: number = 0

  constructor() {
    super()
    this.battleData = window.battleData
    this.gameInfo = window.gameInfo
    this.once(eui.UIEvent.COMPLETE, this.onComplete, this)

    this.oauthMode = this.battleData.oauthMode;
    let width = '228'
    let backChatBtn = '', shareChatBtn = '';
    if (this.oauthMode == 'open_jh') {
      backChatBtn = `<e:Image id="backChatBtn" width="191" height="87" source="niuniu-back-chat_png"></e:Image>`;
      width = '191'
      shareChatBtn = `<e:Image id="shareBtn" width="${width}" source="niuniu-share-chat_png" height="87"></e:Image>`
    } else {
      shareChatBtn = `<e:Image id="shareBtn" width="${width}" source="pdk-share-btn_png"  height="87"></e:Image>`
    }

    this.skinName = `<e:Skin class="JinhuaSkin" width="720" height="1166" xmlns:e="http://ns.egret.com/eui" xmlns:w="http://ns.egret.com/wing">
      <e:Image source="pdk-di_png" x="0" y="0" width="720" height="1166"/>
      <e:Image source="pdk-zjtxt_png" horizontalCenter="0" y="28"/>
      <e:Group horizontalCenter="0" percentWidth="96" height="36" top="132">
        <e:Label id="paodekuaiName" text="" left="0" textColor="0x919191" size="24"></e:Label>
        <e:Label id="roomNo" text="" left="280" textColor="0x919191" size="24"></e:Label>
        <e:Label id="gameTime" text="" right="0" textColor="0x919191" size="24"></e:Label>
      </e:Group>

      <e:Group id="tileGroup" horizontalCenter="0" percentWidth="100" height="730" top="177">
      </e:Group>

      <e:Label size="20" text="游戏结果仅作娱乐用途,禁止用于赌博行为" right="20" top="935" textColor="0xb6913d"></e:Label>

      <e:Group id="bottomBtn" x="0" y="1039" percentWidth="100" height="85">
        <e:Image id="backRoomBtn" source="pdk-back_png" width="${width}" height="85"></e:Image>
        ${backChatBtn}
        ${shareChatBtn}
      </e:Group>
    </e:Skin>`
  }

  private onComplete(e: eui.UIEvent) {
    var vLayout:eui.VerticalLayout = new eui.VerticalLayout()
    vLayout.gap = 0
    vLayout.horizontalAlign = egret.HorizontalAlign.CENTER
    this.tileGroup.layout = vLayout //设置问垂直布局

    this.gameTime.text = window.util.getDateTime(this.battleData.room.createTime)
    this.roomNo.text = `房号 ${this.battleData.room.roomNo}`

    this.battleData.finishList.forEach(player => {
      const userLabel = new UserLabel(player)
      this.tileGroup.addChild(new UserLabel(player))
    })

    if (window.isMiniProgram) {
      this.bottomBtn.removeChild(this.backRoomBtn)
    }
    if(this.battleData.clubRoom){
      this.backRoomBtn.source = 'pdk-back-club_png'
    }
    var hLayoutBottom:eui.HorizontalLayout = new eui.HorizontalLayout()
    hLayoutBottom.gap = 100
    if (this.oauthMode === 'open_jh') {
      hLayoutBottom.gap = 20
    }
    hLayoutBottom.horizontalAlign = egret.HorizontalAlign.CENTER
    this.bottomBtn.layout = hLayoutBottom

    window.eventDispatcher.addEventListener('ok', function() {
      this.uiLabelNumber++
      console.log('labelOnComplete', this.uiLabelNumber)
      if (this.uiLabelNumber >= this.battleData.finishList.length) {
        this.dispatchEvent(new egret.Event('renderOk'))
      }
    }, this)

    this.shareBtn.addEventListener(egret.TouchEvent.TOUCH_TAP, function (argument) {
      let oauthMode = sessionStorage.getItem('oauthMode');
      if (oauthMode == 'xianliao' || oauthMode == 'open_jh') {
          this.dispatchEvent(new egret.Event('onXianliaoShare'));
      }
    }, this);

    const ruleName = JSON.parse(this.battleData.room.roomDescribe).ruleType === 1 ? '(15张)' : '(16张)'
    this.paodekuaiName.text = '九天互游跑得快' + ruleName
  }

}

export default MainComponent